<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
  <table class="layui-hide" id="attqu" lay-filter="attqu"></table>
</div>

<script id="toolbar"  type="text/html">

    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<!--    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> -->
  
     <div class="layui-inline">
     <div class="layui-input-inline" style="width:150px;height:38px;">
       <input type="text" name="likeName" id="likeName" required lay-verify="required" placeholder="请输入工号" class="layui-input">
     </div>
     <div class="layui-inline">
       <button class="layui-btn layui-btn-sm"  data-type="reload" id="search"><i class="layui-icon">&#xe615;</i>搜索</button>
     </div>  
    </div>
</script>

<script id="bar" type="text/html">
  <a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="editAttqu">编辑</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>


<script type="text/html" id="editLayer">
    <!-- 编辑模态框 -->
<div>
     <form action="/editAttqu" class="layui-form" id="addForm">
      <div class="layui-form-item" style="display:none;">  
       <label class="layui-form-label">id</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="id" id="id">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">月份</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="month" id="month">
       </div>   
     </div>
     <div class="layui-form-item">
      <div class="layui-inline">
       <div>
       <label class="layui-form-label">工号</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="empNo" id="empNo">
       </div>
       </div>
       <div>
       <label class="layui-form-label">姓名</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="name" id="name">
       </div>
       </div>
      </div>
     </div>
     <div class="layui-form-item">
      <div class="layui-inline">
       <label class="layui-form-label">加班</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="overtime" id="overtime">
       </div>
       <div class="layui-form-mid layui-word-aux">小时</div>
       <label class="layui-form-label">出差</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="businessTrip" id="businessTrip">
       </div>
       <div class="layui-form-mid layui-word-aux">天</div>
       </div>     
     </div>
     <div class="layui-form-item">
      <div class="layui-inline">
       <label class="layui-form-label">请假</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="vacate" id="vacate">
       </div>
       <div class="layui-form-mid layui-word-aux">天</div>
       <label class="layui-form-label">迟到/早退</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="lateOrEarly" id="lateOrEarly">
       </div>
       <div class="layui-form-mid layui-word-aux">次</div>
       </div>     
     </div>
    <div class="layui-form-item">
       <label class="layui-form-label">加班补贴</label>
       <div class="layui-input-inline">
         <input class="layui-input" type="text" name="oSubsidy" id="oSubsidy">
       </div>
     <div class="layui-form-mid layui-word-aux">元</div>   
     </div>
    <div class="layui-form-item">
       <label class="layui-form-label">出差补贴</label>
       <div class="layui-input-inline">
         <input class="layui-input" type="text" name="bSubsidy" id="bSubsidy">
       </div>
      <div class="layui-form-mid layui-word-aux">元</div>   
    </div>
    <div class="layui-form-item">
       <label class="layui-form-label">迟到/早退扣款</label>
       <div class="layui-input-inline">
         <input class="layui-input" type="text" name="lSubsidy" id="lSubsidy">
       </div>  
       <div class="layui-form-mid layui-word-aux">元</div> 
     </div>
    <div class="layui-form-item">
       <label class="layui-form-label">请假扣款</label>
       <div class="layui-input-inline">
         <input class="layui-input" type="text" name="vSubsidy" id="vSubsidy">
       </div>  
       <div class="layui-form-mid layui-word-aux">元</div> 
     </div>
     </form> 
    </div>
</script>

<script src="layui/layui.js"></script> 
<script th:inline="none">
  layui.use('table',function(){
	  var table=layui.table;
	  var $=layui.jquery;
	  table.render({
		  elem:'#attqu',
		  url:'/getAttqu',
		  method:'post',
		  toolbar:'#toolbar',
		  defaultToolbar:['filter','exports','print',{title:'提示',layEvent:'LAYTABLE_TIPS',icon:'layui-icon-tips'}],
		  title:'员工信息表',
		  cols:[[
		    	 {type:'checkbox',fixed:'left'},
		    	 {field:'id',title:'ID',fixed:'left',unresize:true,sort:true,width:80}
		    	 ,{field:'empNo',title:'工号',sort:true,width:100}
		    	 ,{field:'name', title:'姓名',sort: true,width:100}
		    	 ,{field:'month', title:'月份',width:100}
		    	 ,{field:'vacate', title:'请假天数',width:100}
		    	 ,{field:'lateOrEarly', title:'迟到早退次数',width:120}
		    	 ,{field:'overtime', title:'加班小时数',width:110}
		    	 ,{field:'businessTrip', title:'出差天数',width:100}
		    	 ,{field:'oSubsidy', title:'加班补贴',width:100}
		    	 ,{field:'bSubsidy', title:'出差补贴',width:120}
		    	 ,{field:'lSubsidy', title:'迟到/早退扣款',width:125}
		    	 ,{field:'vSubsidy', title:'请假扣款' ,width:100}
		    	 ,{fixed: 'right', title:'操作', toolbar: '#bar',width:120}
		     ]],
		     id:'testreload',
		     page:true
	  });
	  
	  //表格数据重载
	  var active={
			  reload:function(){
				  var demoReload=$('#likeName');
				  table.reload('testreload',{
					  page:{
						  curr:1
					  },
					  where:{
						  //参数name的名称要与控制器中的一致
						  empNo:demoReload.val()
					  },
					  url:'/searchEmp',
					  method:'post'
				  });
			  }
	  };
	  
	  //搜索按钮事件
	  
	  $("#search").on('click',function(){
		  var type=$(this).data('type');
		  active[type]?active[type].call(this):'';
	  });
	  
	  
	  //头部工具栏
	  table.on('toolbar(attqu)',function(obj){
		  var checkStatus=table.checkStatus(obj.config.id);
		  switch(obj.event){
		  case 'getCheckLength':
			  var data=checkStatus.data;
			  layer.msg('选中了：'+data.length+'个');
		  break;
		  case 'isAll':
			  layer.msg(checkStatus.isAll?'全选':'未全选');
		  break;
		  case 'LAYTABLE_TIPS':
			  layer.alert('这是工具栏右侧自定义的一个图标按钮');
		  break;
		  };
	  });
	  
	  //行工具栏
	  table.on('tool(attqu)',function(obj){
		  var data=obj.data;
		  if(obj.event==='editAttqu'){
			 layui.use('form',function(){
				 var form=layui.form;
				 var $=layui.jquery;
				 var addIndex=layer.open({
					 formType:1,
					 title:'编辑考勤量化信息',
					 btn:['确认','取消'],
					 area:['450px','450px'],
					 content:$('#editLayer').html(),
					 yes:function(addIndex,layero){
						     var id=$("#id").val();
						     var empNo=$("#empNo").val();
						     var name=$("#name").val();
						     var overtime=$("#overtime").val();
						     var businessTrip=$("#businessTrip").val();
						     var vacate=$("#vacate").val();
						     var lateOrEarly=$("#lateOrEarly").val();
						     var oSubsidy=$("#oSubsidy").val();
						     var bSubsidy=$("#bSubsidy").val();
						     var lSubsidy=$("#lSubsidy").val();
						     var vSubsidy=$("#vSubsidy").val();
						  $.ajax({
							  url:'/addAttqu',
							  method:'post',
							  contentType:"application/json;charset=utf-8",
							  data:JSON.stringify({id:id,empNo:empNo,name:name,overtime:overtime,businessTrip:businessTrip,vacate:vacate,lateOrEarly:lateOrEarly,oSubsidy:oSubsidy,bSubsidy:bSubsidy,lSubsidy:lSubsidy,vSubsidy:vSubsidy}),
							  success:function(data){
								  layer.msg("添加成功");
								  window.setTimeout(function(){window.location.reload();},500)
							  },
							  error:function(data){
								  layer.msg("添加失败");
								 // layer.msg(account1);
							  }
						  });
					 },
					 btn2:function(addIndex,layero){
						 layer.close(addIndex);
					 },
					 success:function(){
						 layui.use('laydate',function(){
							   var laydate=layui.laydate;
							   laydate.render({
								   elem:'#month',
								   type:'month',
							   });
						   });
						 $("[name='id']").val(data.id);
						 $("[name='empNo']").val(data.empNo);
						 $("[name='name']").val(data.name);
						 $("[name='month']").val(data.month);
						 $("[name='vacate']").val(data.vacate);
						 $("[name='overtime']").val(data.overtime);
						 $("[name='lateOrEarly']").val(data.lateOrEarly);
						 $("[name='businessTrip']").val(data.businessTrip);
						 $("[name='oSubsidy']").val(data.oSubsidy);
						 $("[name=lSubsidy]").val(data.lSubsidy);
						 $("[name=bSubsidy]").val(data.bSubsidy);
						 $("[name=vSubsidy]").val(data.vSubsidy);
						  form.render();
					 },
				 });
			 });
		  }else if(obj.event==='del'){
			  layer.confirm('真的删除吗',function(index){
					// obj.del();
					 layer.close(index);
						 
					  //向服务器端发送删除指令
					  $.ajax({
						  url:'/delAttqu?id='+data.id,
						  method:'post',
						  async:false,
						  
						  success:function(data){
							  if(data){
							  layer.msg("删除成功");
							  obj.del();
							  } 
							//  }else{layer.msg("删除失败");}
						  },
						  error:function(data){
							  if(data){
								  layer.msg("删除失败");
							  }
						  }
					  });
				  });
		  }
	  });

  });
</script>
</body>
</html>